<template>
	<view class="content">
		<view class="user-header">
			<view class="user-avatar">
				<image class="img" :src="'http://localhost:4567/messy_json/img?path='+userInfo.avatar"></image>
			</view>
			<view class="user-name">
				{{userInfo.name}}
			</view>
			<view class="user-college">
				{{userInfo.college}}
			</view>
			<view class="user-scope">
				你的ID：{{userInfo.id}}
			</view>
		</view>

		<view class="bottom-bar">
			<button type="primary" @click="unReser()">取消预约</button>
		</view>
	</view>

</template>

<script>
	import CheckList from "@/components/checkList/checkList.vue"
	export default {
		data() {
			return {
				checkList: [],
				userInfo: "",
				token: "",
				images: []
			};
		},
		onPullDownRefresh() {
			this.getUserInfo();
			this.getCheckList();
		},
		methods: {
			unReser(reserInfo) {
				var t = this;
				console.log(this);
				uni.request({
					url: "http://localhost:4567/reser_json/exit.opera/" + t.userInfo.id,
					header: {
						"token": t.token
					},
					method: "POST",
					success(res) {
						if (res.data.code) {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确认');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: "取消成功",
								success: function(res) {
									if (res.confirm) {
										uni.navigateBack();
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					},
					fail() {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				})
			},
			getCheckList() {
				var _self = this;
				uni.getStorage({
					key: 'token',
					success: function(storage) {
						uni.request({
							url: "http://localhost:4567/check_json/dayCheck.json",
							header: {
								"token": storage.data.tokenName,
							},
							method: "POST",
							success: (res) => {
								_self.checkList = res.data
								_self.getAvatar()
							},
							fail: (res) => {}
						});
					},
					fail: function(res) {}
				});
			},
			getUserInfo() {
				var _self = this;
				uni.getStorage({
					key: 'token',
					success: function(storage) {
						_self.token = storage.data.tokenName;
						uni.request({
							url: "http://localhost:4567/user_json/getUser.json",
							header: {
								"token": storage.data.tokenName,
							},
							method: "POST",
							success: (res) => {
								if (res.statusCode != 200) {
									uni.navigateTo({
										url: '/pages/login/login'
									});
								} else {
									_self.userInfo = res.data
								}
							},
							fail: (res) => {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						});
					},
					fail: function(res) {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				});
			},
			getAvatar() {
				var t = this;
				this.images = []
				for (var i = 0; i < this.checkList.length; i++) {
					uni.request({
						url: "http://localhost:4567/user_json/userAvatar.json/" + t.checkList[i].userId,
						method: "POST",
						header: {
							"token": t.token
						},
						success(res) {
							t.images.push(res.data);
						}
					})
				}
			},
			
		},
		onLoad() {
			this.getUserInfo();
			this.getCheckList();
		}
	}
</script>
<style lang="less" scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		height: auto;
		background-color: #fff;
	}
	
	.user-header {
		height: 400rpx;
		background-color: #409EFF;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;

		.user-avatar {
			margin-top: 40rpx;
			
			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

		}

		.user-name {
			font-size: 50rpx;
		}

		.user-college {
			font-size: 20rpx;
		}

		.user-scope {
			font-size: 20rpx;
			margin-top: 20rpx;
		}
	}

	
	.checked-list {
		width: 100vw;
		min-height: calc(100vh - 510rpx);
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.title {
			width: 94vw;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 20px;
			font-weight: bold;
		}
		
		.avaImg {
			width: 94vw;
			height: 100rpx;
			margin-top: 20upx;
			border-bottom: 1px solid #f1f2f6;
			padding: 20rpx 0;
		
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
			}
		}
	}
	
	.bottom-bar {
		width: 100vw;
		height: 140rpx;
		box-shadow: 0 0 20upx rgba(0,0,0,.1);
		position: fixed;
		bottom: 0;
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		
		button {
			width: 90vw;
			margin-top: 20rpx;
		}
	}
</style>
